<template>
	<div>
		<div class="ques-opt-title">
			<i v-if="question?.attribute?.required" class="star"></i>
			{{ index + 1 + "、" }}{{ question.title }}
			<i v-if="!isValid" class="required-err-msg">必填</i>
		</div>
		<!--这是手机端的UI-->
		<!-- <div v-for="(i, index) in question.row" :key="index" class="ques-opt-body">
			<div> （{{ index + 1 }}）、{{ i.title }} </div>
			<div v-for="option in question.children" :key="option.id">
				<label class="checkbox">
					<input type="checkbox" :value="option.id" :name="i.id" v-model="question.answer[i.id]" :disabled="disabled" />
					<span>
						{{ option.title }}
						<span v-if="reportScoreIs" class="score">（ {{ option?.attribute?.score }} ） 分</span>
					</span>
				</label>
			</div>
		</div> -->

		<div class="ques-opt-body">
			<table class="ques-opt-item-table">
				<thead>
					<tr>
						<th></th>
						<th v-for="col in question.children" :key="col.id">
							<div class="ques-opt-col">
								{{ col.title }}
								<div v-if="scoreIs">
									（ <span>{{ col?.attribute?.score }}</span> 分 ）
								</div>
							</div>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="row in question.row" :key="row.id">
						<td>
							<div class="ques-opt-row">
								{{ row.title }}
							</div>
						</td>
						<td v-for="col in question.children" :key="col.id">
							<label style="width: 100%; height: 100%; display: block">
								<input type="checkbox" :name="row.id" :value="col.id" v-model="question.answer[row.id]" :disabled="disabled" />
							</label>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</template>

<script>
import ques from "./quesComponents.js";
export default {
	mixins: [ques],
	methods: {
		isFinished() {
			return (
				this.question.answer &&
				Object.values(this.question.answer).every((e) => {
					return e && e.length > 0;
				})
			);
		}
	}
};
</script>
